<template>
  <div>
    <p>指定 props 的类型 、为 prop attribute 指定字符串值、数字值</p>
    <!-- 3、使用组件 -->
    <operation firstOperand="20" 
               operator="+" 
               secondOperand="48"></operation>
    <operation :firstOperand="first" 
               operator="+" 
               :secondOperand="second"></operation>
    <p>为 prop attribute 传入一个布尔值</p>
    <marital-status></marital-status>
    <marital-status married></marital-status>
    <marital-status :married="married"></marital-status>
    <p>为 prop attribute 传入一个数组</p>
    <cart :products="[ 
                      {id: 1001 , name: 'Vue从入门到放弃' , price: 98 },
                      {id: 2002 , name: 'SpringBoot从没入门到放弃' , price: 88 } ,
                      {id: 3003 , name: 'MyBatis从什么都不会到放弃' , price: 78 }
                     ]"></cart>
    <cart :products="products"></cart>
    <p>为 prop attribute 传入一个对象</p>
    <!-- 为 instance 绑定的对象采用字面量形式定义 -->
    <panda :instance="{ id: 3003 , name: '和和' , age: 6 }"></panda>
    <!-- 为 instance 绑定 根组件 中的一个 Data Property -->
    <panda :instance="panda"></panda>

    <p>传入一个对象的所有 property</p>
    <student v-bind="{ id: 8526 , name: '秋香' , gender: '靓妹' , age: 18 }" ></student>
    <student :="{ id: 8526 , name: '秋香' , gender: '靓妹' , age: 18 }" ></student>
    <student v-bind="student" ></student>
    <student :="student" ></student>

    <p>Prop 验证</p>
    <!-- Prop 的大小写命名 (camelCase vs kebab-case) -->
    <person name="李清照" year-of-birth="1084" gender="female"></person>
    <person :name="person.name" ></person>
    <person :name="person.name" 
            :year-of-birth="person.yearOfBirth"
            :gender="person.gender" 
            :homeload="person.homeload"></person>

    <p>非 prop 的 attribute : attribute 继承 ( inheritAttrs: true )</p>
    <!-- 注意 instance 是 prop attribute -->
    <book :instance="{ id: 2001 , name: 'Spring从入门到放弃' , price: 68 }"
          class="book-wrapper"
          id="first" 
          data-status="已发行"></book>
    <!-- 这里的 class 、 id 、data-status 都是 "非 prop 的" attribute-->
    <p>非 prop 的 attribute : 禁用 Attribute 继承 ( inheritAttrs: false )</p>

    <p>非 prop 的 attribute : 多个根节点上的 Attribute 继承</p>
    <layout class="wrapper" id="layout-main"></layout>
  </div>
</template>

<script>
// 1、导入组件
import Operation from './components/Operation.vue';
import MaritalStatus from './components/MaritalStatus.vue' ;
import Cart from './components/Cart.vue' ;
import Panda from './components/Panda.vue' ;
import Student from './components/Student.vue' ;
import Person from './components/Person.vue' ;
import Book from './components/Book.vue' ;
import Layout from './components/Layout.vue'

export default {
  name: 'App',
  // 2、注册组件(局部注册)
  components: {
    'operation': Operation ,
    'marital-status': MaritalStatus ,
    'cart': Cart ,
    'panda': Panda ,
    'student': Student ,
    'person': Person ,
    'book': Book ,
    'layout': Layout
  },
  data(){
    return {
      first: 10 ,
      second: 24 ,
      married: false ,
      products: [
                { id: 1234 , name: 'Vue从入门到放弃' , price: 98 , number: 1 },
                { id: 2345 , name: '哈尔冰红肠' , price: 28 , number: 1 },
                { id: 1122 , name: 'SpringBoot从没入门到放弃' , price: 88 , number: 1 },
                { id: 3344 , name: '雪花啤酒(勇闯天涯)' , price: 60 , number: 1 }
      ],
      panda: {
        id: 5005 ,
        name: '美美' ,
        age: 5
      },
      student: {
        id: 9527,
        name: '华安' ,
        gender: '靓仔' ,
        age: 20
      },
      person: {
        id: 2345 ,
        name: '辛弃疾' ,
        yearOfBirth: 1140 ,
        gender: 'male' ,
        homeload: {
          name: '大宋'
        }
      }
    }
  }
}
</script>

<style>
p { 
  padding: 5px 15px;
  background: #dfdfdf ;
}
</style>
